<template>
	<view class="wrapper">
		<!-- 车辆租期信息 -->
		<view class="carTimeWrapper">
			<!-- 车辆 -->
			<view class="carContent">
				<image class="carImg" :src="carUrl|mmvImageUrl" mode=""></image>
				<view class="carInfo">
					<view class="carInfo_name">{{carInfo.modelInfo}}</view>
					<view class="carInfo_other">
						<text class="otherValue">{{carInfo.speedChangingBox}}</text>
						<text class="otherValue">{{carInfo.seating}}</text>
						<text class="otherValue">{{carInfo.displacement}}</text>
						<text class="otherValue">{{carInfo.fuelType}}</text>
						<text class="otherValue">{{carInfo.styleModel}}</text>
					</view>
				</view>
			</view>
			<!-- 租期 -->
			<view class="rentTimeContent">
				<view class="subTitle">租期</view>
				<view class="timeInfo">
					<text class="time">取车时间:{{startTime}}</text>
					<text class="duration">租{{tenancyTerm}}个月</text>
				</view>
			</view>
		</view>

		<!-- 取还车场站信息 -->
		<view class="addressWrapper">
			<view class="takeAddress">
				<text class="title">取还门店</text>
				<text class="value">{{storeName}}</text>
			</view>
		</view>

		<!-- 付款方式 -->
		<view class="payWayWrapper">
			<view class="subTitle">付款方式</view>
			<view class="radioBox">
				<u-radio-group v-model="radiovalue1" placement="row">
					<u-radio :customStyle="{marginLeft: '14px'}" v-for="(item, index) in orderInfo.paymentSupportVoList"
						labelSize="12" :key="item.paymentSupport" :label="item.dictLabel" :name="item.dictLabel"
						activeColor="#009CF9" @change="radioChange(item)">
					</u-radio>
				</u-radio-group>
			</view>
		</view>

		<!-- 优惠券 -->
		<!-- <view class="couponWrapper" v-if="couponList.length > 0">
			<view class="subTitle" @tap="showCoupon = true">
				选择优惠
				<u-icon name="arrow-right" size="12"></u-icon>
			</view>
			<view class="content" v-if="currentCoupon">
				<view class="titleContent">
					<u-icon name="trash" color="#009CF9" @click.stop="deleteCurrentCoupon"></u-icon>
					<text class="title">{{currentCoupon.couponName}}</text>
				</view>
				<view class="valueContent">
					<text class="valueTitle">优惠券立减</text>
					<text class="valuePrice">-¥{{currentCoupon.money}}</text>
				</view>
			</view>
		</view> -->

		<!-- 优惠券 -->
		<view class="couponWrapper" v-if="couponList.length > 0">
			<view class="subTitle" @tap="showCoupon = true">
				选择优惠
				<u-icon name="arrow-right" size="12"></u-icon>
			</view>
			<view class="content" v-if="currentCoupon">
				<view class="titleContent">
					<u-icon name="trash" color="#009CF9" @click.stop="deleteCurrentCoupon"></u-icon>
					<text class="title">{{currentCoupon.couponName}}</text>
				</view>

				<view class="valueContent">
					<text class="valueTitle">优惠券立减</text>

					<text v-if="currentCoupon.couponCategory == 2" class="valuePrice">-¥{{discount}}</text>
					<text v-else>{{currentCoupon.preferentialMoney}}</text>
				</view>
			</view>
		</view>


		<!-- 租金 -->
		<view class="rentWrapper">
			<view class="subTitle">车辆租赁费</view>
			<view class="rent">
				<text class="title">租金</text>
				<text v-if="methodPayment == 1" class="value">¥{{orderInfo.monthlyRent}}/期</text>
				<text v-else class="value">¥{{orderInfo.monthlyRent*tenancyTerm}}</text>
			</view>
		</view>


		<!-- 押金 -->
		<view class="depositWrapper">
			<view class="subTitle">押金</view>
			<view class="deposit">
				<text class="title">车辆押金</text>
				<text class="value">¥{{orderInfo.deposit}}</text>
			</view>
			<u-line margin="20px 0"></u-line>
			<view style="font-size: 26upx; font-weight: bold; color: #333333; margin-left: 18upx;">押金支付方式</view>
			<view class="payWayWrapper">
				<view class="payItem" v-for="(item, index) in payWays" :key="index"
					@tap="payWayChange(item.depositPayType)">
					<text class="payTitle">{{item.title}}</text>
					<image style="width: 30upx; height: 30upx;"
						:src="currentDepositPayType == item.depositPayType ? '../static/radio_selected.png' : '../static/radio-default.png'"
						mode=""></image>
				</view>
			</view>
		</view>

		<!-- 取车必备证件 -->
		<view class="tipWrapper">
			<view class="subTitle">取车必备证件</view>
			<view class="content">
				<text>取车凭证</text>
				<text>实名认证时的身份证+驾驶证</text>
				<text>发票</text>
				<text>订单完成后，进入小程序，在“我的>申请开票”可申请开票</text>
			</view>
		</view>


		<view class="agreementWrapper">
			<u-checkbox-group name="check" @change="checkedAgreenment = !checkedAgreenment">
				<u-checkbox size="15" activeColor="#009CF9"></u-checkbox>
			</u-checkbox-group>
			<text>我已阅读并同意</text>
			<text @click="goAgreent(6)">《用车服务协议》</text>
			<text @click="goAgreent(7)"> 《预定须知》</text>
		</view>

		<!-- 底部总金额确认 -->
		<view class="bottomWrapper">
			<view class="totalPriceContent">
				<view>
					<text class="title">总金额:</text>
					<text class="value">¥{{amount}}</text>
				</view>
			</view>
			<view class="confimBtn" @tap="confimOrder">
				确认订单
			</view>
		</view>

		<!-- 优惠券 -->
		<u-popup :show="showCoupon" @close="showCoupon = false" closeable round="16">
			<scroll-view scroll-y="true" class="couponAlertWrapper">
				<view>
					<view class="couponTitle">优惠券</view>
					<order-cooupon :index="index" :currentIndex="currentCouponIndex" :couponInfo="item"
						@selectedCoupon="selectedCoupon()" v-for="(item, index) in couponList" :key="index">
					</order-cooupon>
				</view>
			</scroll-view>

		</u-popup>

	</view>
</template>

<script>
	import {
		longPlanModelInfo,
		longConfirmationOrder,
		payLongOrder
	} from '@/api/longOrder-api.js'
	import {
		meetRequirementMemberCoupon
	} from '@/api/coupon-api.js';
	import orderCooupon from '@/components/home/coupon/order-coupon.vue'
	var moment = require('@/utils/moment.js')
	export default {
		components: {
			orderCooupon
		},
		data() {
			return {
				payWays: [{
						title: '在线支付',
						depositPayType: 1,
					},
					{
						title: '线下支付',
						depositPayType: 2,
					}
				],
				carInfo: {},
				carUrl: '',
				planId: '',
				planMealId: '',
				planDay: 0,
				orderInfo: {},
				couponList: [],
				showCoupon: false, //是否显示优惠券
				currentDepositPayType: 2, //当前的支付类型
				currentCoupon: null, //当前选择的优惠券
				currentCouponIndex: -1, //当前优惠劵的下标
				methodPayment: 1, //支付方式 1.月付 2.一次性
				radiovalue1: '按单月支付租金',
				checkedAgreenment: false,
				
				//活动模板新增
				businessNo : 2,
				startTime : '',
				storeId : '',
				storeName : '',
				tenancyTerm : '',
				activityId : '',
				rentAmount : 0,
				
				
			}
		},
		computed: {
			tenantId() {
				return this.$store.state.user.tenantId;
			},
			endTime() {
				var endTime = moment(this.startTime).add(this.tenancyTerm, "month").format("YYYY-MM-DD");
				return endTime;
			},
			
			totalMonthlyRent() {
				var amount = this.tenancyTerm * this.orderInfo.monthlyRent;
				return amount;
			},
			//总金额
			amount() {
				var totalAmount = this.orderInfo.monthlyRent; //每期的租赁费
				if (this.methodPayment == 2) { //如果是一次性结算
					totalAmount = this.tenancyTerm * totalAmount;
				}
				if (this.currentDepositPayType == 1) { //线上支付 = 租赁费 + 押金
					totalAmount = totalAmount + this.orderInfo.deposit;
				}
				if (!this.$u.test.isEmpty(this.currentCoupon)) { //如果存在优惠券
					if(this.currentCoupon.couponCategory == 2) {//折扣劵
						//优惠券金额
						let couponAmount = this.discount;
						totalAmount = totalAmount - couponAmount;
					}else {//立减|满减
						//优惠券金额
						let couponAmount = this.currentCoupon.preferentialMoney;
						totalAmount = totalAmount - couponAmount;
					}
				}
				return totalAmount;
			},
			discount() {
				if (this.currentCoupon) {
					let couponAmount = this.orderInfo.monthlyRent * ((10 - this.currentCoupon.discount) / 10);
					let resultAmount = parseFloat(couponAmount).toFixed(2);
					return resultAmount;
				}
				return 0;
			}
		},
		onLoad(op) {
			if(op) {
				this.businessNo = op.businessNo;
				this.storeName = op.storeName;
				this.storeId = op.storeId;
				this.startTime = op.startTime;
				this.tenancyTerm = op.tenancyTerm;
				this.planId = op.planId;
				this.carUrl = op.carUrl;
				this.activityId = op.activityId;
				this.rentAmount = op.rentAmount;
			}
			this.getCarInfo();
		},
		methods: {
			//获取车型信息
			getCarInfo() {
				uni.showLoading({
					title: '加载中...'
				})
				longPlanModelInfo({
					tenantId: this.tenantId,
					longPlanId: this.planId
				}).then(res => {
					this.carInfo = res.data;
					this.getOrderInfo();
				})
			},

			//订单确认接口
			getOrderInfo() {
				var params = {
					tenantId: this.tenantId,
					longPlanId: this.planId,
					rentAmount : this.rentAmount,
				}
				longConfirmationOrder(params).then(res => {
					uni.hideLoading();
					this.orderInfo = res.data;
					let paymentSupportVo1 = this.orderInfo.paymentSupportVoList[0];
					this.methodPayment = paymentSupportVo1.paymentSupport;
					this.radiovalue1 = paymentSupportVo1.dictLabel;
					this.getCoupon();
				})
			},
			radioChange(item) {
				this.methodPayment = item.paymentSupport;
			},
			// 获取下单优惠券
			getCoupon() {
				meetRequirementMemberCoupon({
					tenantId: this.tenantId,
					storeId: this.storeId,
					planId: this.planId,
					amount : this.orderInfo.monthlyRent,
					bizClassification : this.businessNo,
					pageNo: 1,
					pageSize: 99
				}).then(res => {
					this.couponList = res.data;
				})
			},
			//当前选择的优惠券选择
			selectedCoupon(couponInfo, index) {
				console.log(couponInfo);
				this.currentCouponIndex = index;
				if (couponInfo.couponCategory == 1) { //满减劵
					if (this.orderInfo.monthlyRent >= couponInfo.conditionMoney) { //如果租金大于优惠券满减金额时
						this.currentCoupon = couponInfo;
						this.showCoupon = false;
					} else {
						this.$u.toast('当前优惠券不可用,请选择其他优惠券');
					}
				} else {
					this.currentCoupon = couponInfo;
					this.showCoupon = false;
				}

			},
			//删除优惠券
			deleteCurrentCoupon() {
				this.currentCoupon = null;
				this.currentCouponIndex = -1;
			},
			//改变支付状态
			payWayChange(type) {
				if (type == 3) {
					this.$u.toast('微信支付分功能暂未开通');
				} else {
					this.currentDepositPayType = type;
				}
			},
			//确认订单
			confimOrder() {
				if (this.checkedAgreenment == false) {
					this.$u.toast('请仔细阅读用车服务协议及须知,并勾选');
					return
				}
				var couponId;
				if (!this.$u.test.isEmpty(this.currentCoupon)) {
					couponId = this.currentCoupon.memberCouponId;
				}
				var params = {
					tenantId: this.tenantId,
					longPlanId: this.planId,
					startTime: this.startTime,
					endTime: this.endTime,
					storeId: this.storeId,
					storeName: this.storeName,
					amount: this.amount,
					deposit: this.orderInfo.deposit,
					rent: this.totalMonthlyRent,
					depositPayType: this.currentDepositPayType,
					couponId: couponId,
					tenancyTerm: this.tenancyTerm,
					methodPayment: this.methodPayment,
					activityId : this.activityId
				}
				uni.showLoading();
				payLongOrder(params).then(res => {
					uni.hideLoading();
					//唤起微信支付
					let data = JSON.parse(res.data.json)
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: function(res) {
							uni.$u.toast('支付成功')
							uni.navigateBack({
								delta: 10
							})
						},
						fail: function(err) {

							uni.showToast({
								title: '订单支付失败,请前往订单详情支付',
								icon: 'none'
							})
							uni.navigateBack({
								delta: 10
							})
						}
					});
				})


			},

			goAgreent(type) {
				uni.navigateTo({
					url: '../../pages/guide/guide?type=' + type
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		position: relative;
		margin: 20upx;
		padding-bottom: 130upx;
	}

	.carTimeWrapper {
		background-color: $bg-white-color;
		border-radius: 16upx;
		padding: 30upx;

		.carContent {
			display: flex;
			align-items: center;

			.carImg {
				width: 250rpx;
				height: 118rpx
			}

			.carInfo {
				margin-left: 20upx;

				&_name {
					font-size: 28upx;
					font-weight: bold;
				}

				&_other {
					margin-top: 25upx;

					.otherValue {
						color: $text-color-33;
						margin-right: 26upx;
						font-size: 22upx;
					}
				}
			}

		}

		.rentTimeContent {
			margin-top: 20upx;

			.timeInfo {
				margin-top: 20upx;
				margin-left: 16upx;
				display: flex;
				justify-content: space-between;

				.time {
					font-size: 24upx;
					color: $text-color-33;

				}

				.duration {
					font-size: 24upx;
					color: $main-color;
				}
			}
		}
	}

	.subTitle {
		color: $text-color-33;
		font-size: 26upx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		position: relative;
		left: 10px;

		&:before {
			content: '';
			position: absolute;
			left: -10px;
			top: 50%;
			transform: translateY(-50%);
			margin-right: 10upx;
			height: 26upx;
			width: 8upx;
			background-color: $main-color;
			border-radius: 4px;
			opacity: .8;
		}
	}

	.addressWrapper {
		margin-top: 20upx;
		padding: 20upx;
		background-color: $bg-white-color;
		border-radius: 16upx;

		.takeAddress {
			display: flex;

			.title {
				background-color: $main-color;
				border-radius: 6upx;
				color: $text-color-ff;
				font-size: 26upx;
				text-align: center;
				width: 132upx;
				height: 46upx;
				line-height: 46upx;
			}

			.value {
				height: 46upx;
				line-height: 46upx;
				margin-left: 20upx;
				color: $text-color-33;
				font-size: 24upx;
				text-align: left;
			}
		}
	}

	.payWayWrapper {
		margin-top: 20upx;
		padding: 20upx;
		background-color: $bg-white-color;
		border-radius: 16upx;

		.radioBox {
			margin-top: 20upx;
			font-size: 24upx;
		}
	}

	.couponWrapper {
		margin-top: 20upx;
		padding: 30upx;
		background-color: $bg-white-color;
		border-radius: 16upx;

		.content {
			display: flex;
			justify-content: space-between;
			font-size: 26upx;
			margin: 30upx 0 0 18upx;

			.titleContent {
				display: flex;

				.title {
					margin-left: 10upx;
					color: $text-color-33;
					font-weight: bold;
				}
			}


			.valueContent {
				text-align: right;

				.valueTitle {
					color: $text-color-33;
				}

				.valuePrice {
					margin: 0 10upx;
					color: $text-color-price;
				}
			}
		}
	}

	.rentWrapper {
		margin-top: 20upx;
		padding: 30upx;
		background-color: $bg-white-color;
		border-radius: 16upx;

		.rent {
			display: flex;
			justify-content: space-between;
			font-size: 26upx;
			margin: 30upx 0 0 18upx;
			color: $text-color-33;

			.title {
				font-weight: bold;
			}
		}
	}

	.depositWrapper {
		margin-top: 20upx;
		padding: 30upx;
		background-color: $bg-white-color;
		border-radius: 16upx;

		.deposit {
			display: flex;
			justify-content: space-between;
			font-size: 26upx;
			margin: 30upx 0 0 18upx;
			color: $text-color-33;

			.title {
				font-weight: bold;
			}

			.value {}
		}

		.payWayWrapper {
			.payItem {
				margin: 20upx 30upx;
				display: flex;
				justify-content: space-between;

				.payTitle {
					font-size: 26upx;
					font-weight: bold;
					color: $text-color-33;

				}


			}
		}
	}

	.tipWrapper {
		margin-top: 20upx;
		padding: 30upx;
		background-color: $bg-white-color;
		border-radius: 16upx;

		.content {
			padding: 20upx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			text:nth-child(odd) {
				color: $text-color-33;
				font-size: 26upx;
				font-weight: bold;

			}

			text:nth-child(even) {
				margin-bottom: 10upx;
				color: $text-color-66;
				font-size: 26upx;
				// font-weight: bold;
			}

		}
	}

	.agreementWrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20upx 0;

		text {
			color: $main-color;
			font-size: 26upx;
			font-weight: bold;
		}

		text:nth-child(2) {
			color: $text-color-33;
		}
	}

	.bottomWrapper {
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;
		height: 120upx;
		width: 100%;
		background-color: $bg-white-color;

		.totalPriceContent {
			.title {
				font-size: 30upx;
				color: $text-color-33;
				font-weight: bold;
			}

			.value {
				margin-top: 20upx;
				margin-left: 10upx;
				font-size: 28upx;
				color: $text-color-price;
			}
		}

		.confimBtn {
			width: 330upx;
			height: 90upx;
			line-height: 90upx;
			text-align: center;
			color: $text-color-ff;
			background: linear-gradient(to right, #32ace9 0%, #176cfb 100%);
			border-radius: 45upx;
		}

	}

	.right-arrow {
		position: relative;
		left: -20upx;
	}


	.couponAlertWrapper {
		background-color: $bg-white-color;
		max-height: 800upx;
		padding-top: 70upx;

		.couponTitle {
			font-size: 28upx;
			font-weight: bold;
			color: $text-color-33;
			margin-left: 30upx;
			margin-bottom: 20upx;
		}
	}
</style>
